<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
   <!-- React核心包  最先引入  提供一个对象React -->
   <script src="../react18/react.development.js"></script>
   <!-- React操作DOM的包   提供了一个对象  ReactDOM-->
   <script src="../react18/react-dom.development.js"></script>

   <style>
    .outer{
      width: 400px;
      height: 300px;
      background-color: pink;
    }
   </style>
</head>
<body>
  <div id="app"></div>
  <script>
    /* 
      React对象上有一个createElement方法可以创建虚拟DOM
        -参数1:元素名称
        -参数2:元素上的属性,对象类型
        -参数3....n都是元素的子节点
    */

    // // 创建虚拟DOM  案例1
    // const vDOM=React.createElement("div",{
    //   className:"outer"
    // },"hello vDOM")

    // 创建虚拟DOM  案例2
    // const vDOM=React.createElement('div',{
    //   className:"outer"
    // },"hello vDOM",   "hello  world");

    // 创建虚拟DOM  案例3
const vDOM=React.createElement("div",{className:"outer"},React.createElement('h1',{},"React"),React.createElement("p",{},'React真行!'),React.createElement("span",{},'我要搞懂你!'))

    // 创建一个React的根元素,并把虚拟节点渲染到容器上
    ReactDOM.createRoot(document.getElementById("app")).render(vDOM)
  </script>
</body>
</html>